<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<u-navbar back-text="返回" title="退款详情" :background="{background:'#f2f2f2'}"></u-navbar>
		<view class=" ostatus mt0 hearders">
			<!-- 售后状态 -->
			<view v-if="asInfo.status==0">
				<view class="smll">
					<!-- <u-icon name="/static/public/images/icon_pay.png" size="48"></u-icon> -->
					<text class="fs32 color-ff" style="font-weight: 500;">{{asInfo.ostatus}}</text>
				</view>
				<view class="time_s">
					<text>{{$u.timeFormat(asInfo.update_time, 'yyyy年mm月dd日 hh:MM')}}</text>
				</view>
				<!-- <view class="mt10 color-ff2">售后申请正等待审核.</view> -->
			</view>
			<view v-else-if="asInfo.status==1">
				<view class="smll">
					<!-- <u-icon name="/static/public/images/icon_wrong.png" size="48"></u-icon> -->
					<text class="fs32 color-ff  " style="font-weight: 500;">{{asInfo.ostatus}}</text>
				</view>
				<view class="time_s">
					<text>{{$u.timeFormat(asInfo.update_time, 'yyyy年mm月dd日 hh:MM')}}</text>
				</view>

				<!-- <view class="mt10 color-ff2">您的售后申请，审核不通过.</view> -->
			</view>
			<view v-else-if="asInfo.status==2">
				<view class="smll">
					<!-- <u-icon name="/static/public/images/icon_wait.png" size="48"></u-icon> -->
					<text class="fs34 color-ff" style="font-weight: 500;">审核成功</text>
					<!-- <text class="fs34 color-ff" style="font-weight: 500;">{{asInfo.ostatus}}</text> -->
				</view>
				<view class="time_s">
					<text>{{$u.timeFormat(asInfo.update_time, 'yyyy年mm月dd日 hh:MM')}}</text>
				</view>
				<!-- <view class="mt10 color-ff2">请您把需要售后的商品寄回商家.</view> -->
			</view>
			<view v-else-if="asInfo.status==3">
				<view class="smll">
					<!-- <u-icon name="/static/public/images/icon_wait.png" size="48"></u-icon> -->
					<!-- <text class="fs34 color-ff" style="font-weight: 500;">{{asInfo.ostatus}}</text> -->
					<text class="fs34 color-ff" style="font-weight: 500;">退款中</text>
				</view>
				<view class="time_s">
					<text>{{$u.timeFormat(asInfo.update_time, 'yyyy年mm月dd日 hh:MM')}}</text>
				</view>
				<!-- <view class="mt10 color-ff2">待商家验收售后商品.</view> -->
			</view>
			<view v-else-if="asInfo.status==9">
				<view class="smll">
					<!-- <u-icon name="/static/public/images/icon_right.png" size="48"></u-icon> -->
					<text class="fs34 color-ff " style="font-weight: 500;">{{asInfo.ostatus}}</text>
				</view>
				<view class="time_s">
					<text>{{$u.timeFormat(asInfo.update_time, 'yyyy年mm月dd日 hh:MM')}}</text>
				</view>
			</view>
		</view>

		<view class=" bg-white p20 goods_infos">
			<view>{{asInfo.astype}}商品</view>
			<!-- 商品列表 -->
			<view class="flex mt20">
				<image :src="goodsInfo.pic" style="width:214rpx;height:214rpx;border-radius: 20rpx;"></image>
				<view class="flex_bd ml20 c_2">
					<view class="flex">
						<view class="goods_name   u-font-32 u-line-1">{{goodsInfo.goods_name}}</view>
					</view>
					<view class="ml0 u-flex	c_2">
						<view><text class="u-font-32 c_price">￥</text>{{goodsInfo.sale_price}}</view>
						<view class="u-font-24 c_num u-m-l-32">x{{goodsInfo.goods_number}}</view>
					</view>
					<view class="flex mt10">
						<view v-if="goodsInfo.sku_id > 0" class="color-cc fs26">{{goodsInfo.sku_name}}</view>
						<view class="text-right flex_bd">
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="mt20 p20 fs28 bg-white content_s">

			<view class="flex mt30" v-if="asInfo.status!=1  ">
				<text class="flex_bds">售后类型</text>
				<text class="base-color">{{asInfo.astype}}</text>
			</view>

			<view v-if="asInfo.return_money > 0 && asInfo.status!=1" class=" u-flex mt30">
				<text class="flex_bds">退款金额</text>
				<text class="money-label base-color">{{asInfo.return_money}}</text>
			</view>
			<view v-if="asInfo.type=='return_money' && asInfo.arrival_type" class="flex mt30">
				<text class="flex_bds">退回账户</text>
				<text class=" base-color">{{asInfo.arrival_type}}</text>
			</view>
			<view class=" mt30" v-if="asInfo.status!=1  ">
				<text class="flex_bds">退款原因</text>
				<view class="retuen_info">{{asInfo.return_desc}}</view>
			</view>
			<view class=" mt20" v-if="asInfo.status==1">
				<text class="flex_bds">失败原因 </text>
				<view class="retuen_info">{{asInfo.return_desc}}</view>
			</view>
			<!-- <view class="flex mt50">
				<view>售后原因</view>
				<view class="ml20 flex_bd">
					<rich-text :nodes="asInfo.return_desc"></rich-text>
				</view>
			</view> -->

		</view>
		<view v-if="asInfo.status!=1 && asInfo.status!=0 && asInfo.type!='return_money'">
			<view class=" fs28 bg-white content_s" v-if="asInfo.status!=2">

				<view class="flex mt10">
					<text class="flex_bd">退货物流信息</text>
				</view>

				<view class="flex mt30">
					<text class="flex_bds">物流公司</text>
					<text class=" base-color">{{asInfo.shipping_name}}</text>
				</view>
				<view class="u-flex mt30">
					<text class="flex_bds">快递单号</text>
					<text class=" base-color">{{asInfo.shipping_no}}</text>
				</view>


			</view>
			<view class="subit_post_s" v-if="asInfo.status!=3 && asInfo.astype!='退款'">
				<u-button size="default" class="subit_post " @click="open" :ripple="true" ripple-bg-color="##5CB61A"
					shape="circle">填写快递单号
				</u-button>

			</view>

		</view>


		<!-- <view class="mt20 p20 fs28 bg-white">
			<view class="flex ">
				<text class="flex_bd">售后编号</text>
				<text class=" ">{{asInfo.as_sn}}</text>
			</view>
			<view class="flex mt50">
				<text class="flex_bd">售后类型</text>
				<text class="base-color">{{asInfo.astype}}</text>
			</view>
			<view class="flex mt50">
				<text class="flex_bd">退换数量</text>
				<text class="base-color">{{asInfo.goods_number}}</text>
			</view>
			<view v-if="asInfo.return_money > 0" class="flex mt50">
				<text class="flex_bd">退款金额</text>
				<text class="money-label base-color">{{asInfo.return_money}}</text>
			</view>
			<view class="flex mt50">
				<view>售后原因</view>
				<view class="ml20 flex_bd">
					<rich-text :nodes="asInfo.return_desc"></rich-text>
				</view>
			</view>
			<view class="flex mt50">
				<text class="flex_bd">关联订单</text>
				<view class="color-99" @click="app.goPage('/pages/shop/order/info?order_id='+asInfo.order_id)">
					{{asInfo.order_sn}}
					<u-icon name="arrow-right" color="#cccccc" size="28"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- <view class="mt20 p20 fs28 bg-white">
			<view class="fs30 font-w600">上传图片</view>
			<view class="mt20">
				<view v-for="(pic, index) in imgList" :key="index" class="mlr10 fl mt20">
					<image :src="pic" style="width:210rpx;height:210rpx;" @click="app.showImg(imgList,index)"></image>
				</view>
				<view class="clearfix"></view>
			</view>
		</view> -->
		<!-- <view v-if="asInfo.status == 1" class="flex mt20 p20 fs28 bg-white">
			<view>售后拒绝</view>
			<view class="flex_bd ml20 ">
				<rich-text :nodes="asInfo.remark"></rich-text>
			</view>
		</view> -->
		<!-- <view v-if="asInfo.status >= 2 " class="mt20 p20 fs28 bg-white">
			<view class="fs30 font-w600">请将商品寄回以下地址</view>
			<view class="flex mt20">
				<view>收货人：</view>
				<view class="ml10 flex_bd">
					<rich-text :nodes="returnInfo.return_consignee"></rich-text>
				</view>
			</view>
			<view class="flex mt20">
				<view>联系电话：</view>
				<view class="ml10 flex_bd smll">
					<rich-text :nodes="returnInfo.return_mobile"></rich-text>
				</view>
			</view>
			<view class="flex mt20">
				<view>退货地址：</view>
				<view class="ml10 flex_bd">
					<rich-text :nodes="returnInfo.return_address"></rich-text>
				</view>
			</view>
			<view class="bg-fa color-99 mt20 p20">
				{{returnInfo.return_desc}}
			</view>
			<view v-if="asInfo.status == 2">
				<view class="flex mt20">
					<view>选择快递：</view>
					<view class="ml10 flex_bd smll" @click="shippingShow = true">
						{{shippingName}}
						<u-select v-model="shippingShow" :list="shippingList" :default-value="d_shipping_id"
							@confirm="confirmShipping"></u-select>
					</view>
				</view>
				<view class="flex mt20 smll">
					<view>快递单号：</view>
					<view class="ml10 flex_bd">
						<u-input v-model="shipping_no" type="text" placeholder="请输入快递单号" />
					</view>
				</view>
				<button class="primarybtn mt20" type="warning" :loading="isLoading"
					@click="postShipping">提交退货信息</button>
			</view>
			<view v-else-if="asInfo.status >= 3">
				<view class="flex mt20">
					<view>快递公司：</view>
					<view class="ml10 flex_bd smll">
						{{asInfo.shipping_name}}
					</view>
				</view>
				<view class="flex mt20 smll">
					<view>快递单号：</view>
					<view class="ml10 flex_bd smll">
						{{asInfo.shipping_no}}
					</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="mt20 p20 bg-white h100">
			<button v-if="asInfo.status == 1" class="fr action-btn recom"
				@click="app.goPage('apply?rec_id='+asInfo.rec_id)">重新申请</button>
		</view> -->
		<view class="h50"></view>
		<view>
			<u-modal v-model="show" title="填写单号" @confirm="confirm" :show-cancel-button="true" :content="content">
				<view class="t_title">
					<u-form-item label="所属快递">
						<u-select v-model="shippingShow" :list="shippingList" :default-value="d_shipping_id"
							@confirm="confirmShipping"></u-select>
						<u-input v-model="shippingName" placeholder="选择快递" @click="shippingShow = true" :border="border"
							type="select" />
					</u-form-item>
				</view>
				<view class="t_title">
					<u-form-item label="单号">
						<u-input v-model="shipping_no" type="text" placeholder="输入单号" :border="border" />
					</u-form-item>
				</view>
			</u-modal>
			<!-- <u-button @click="open">
				打开模态框
			</u-button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				border: true,
				setting: {},
				as_id: 0,
				asInfo: {},
				goodsInfo: {},
				returnInfo: {},
				remark: '',
				imgList: [],
				shippingShow: false,
				shippingList: [],
				shipping_id: 0,
				border: true,
				d_shipping_id: [0],
				shippingName: '',
				shipping_no: '',
				isLoading: false,
				show: false,
				content: ''
			}
		},
		onLoad(options) {
			this.app.isLogin(this); //强制登陆
			let as_id = parseInt(options.as_id);
			if (isNaN(as_id) == true || as_id < 1) {
				this.app.showModal('售后ID传值错误.', -1);
				return false;
			}
			this.as_id = as_id;
			this.setting = uni.getStorageSync("setting");
			this.getAsInfo();
		},
		onShow() {},
		methods: {
			confirm(e) {
				this.postShipping()
			},
			open() {
				this.show = true;
			},
			getAsInfo() {
				let that = this;
				this.$u.post('shop/api.after_sale/info', {
					id: this.as_id
				}).then(res => {
					this.goodsInfo = res.data.goods;
					this.returnInfo = res.data.returnInfo;
					delete res.data.goods;
					delete res.data.returnInfo;
					this.asInfo = res.data;
					this.goodsInfo.pic = this.config.baseUrl + this.goodsInfo.pic;
					this.imgList = [];
					this.asInfo.imgs.forEach(url => {
						that.imgList.push(that.config.baseUrl + url);
					})
					if (this.asInfo.status == 2) {
						this.asInfo.shippingList.forEach(item => {
							let arr = {};
							arr.value = item.shipping_id;
							arr.label = item.shipping_name;
							that.shippingList.push(arr);
						})
					}
				}).catch(res => {})
			},
			confirmShipping(e) {
				let that = this;
				this.shippingName = e[0].label;
				this.shipping_id = e[0].value;
				this.shippingList.forEach(function(item, key) {
					if (item.value == that.shipping_id) {
						that.d_shipping_id = [key];
					}
				})
			},
			postShipping() {
				if (this.isLoading == true) {
					return false;
				}
				if (this.shipping_id < 1) {
					return this.$u.toast('请选择寄回快递.');
				}
				if (this.shipping_no == '') {
					return this.$u.toast('请输入快递单号.');
				}
				if (this.shipping_no.length < 8) {
					return this.$u.toast('请正确的快递单号.');
				}
				this.isLoading = true;
				let data = {};
				data.shipping_id = this.shipping_id;
				data.shipping_no = this.shipping_no;
				data.as_id = this.as_id;
				this.$u.post('shop/api.after_sale/shipping', data).then(res => {
					this.isLoading = false;
					this.getAsInfo();
				}).catch(res => {
					this.isLoading = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100rpx;
	}

	.t_title {
		margin: 0rpx 20rpx;
	}

	.base-color {
		color: #333333 !important;
		font-size: 28rpx;
	}

	.flex_bd {
		flex: 0.3;
	}

	.ostatus {
		padding: 50rpx 30rpx;
		color: #ffffff;
		background: url(/static/public/images/bg_Bubbles.jpg) no-repeat;
		background-size: 100%;
	}

	::v-deep .uicon-arrow-down-fill::before {
		// content:"arrow-down"
		content: "\e60d"
	}

	::v-deep .u-border-bottom:after {

		border-bottom-width: 0rpx;
	}

	::v-deep uni-view.u-model__footer__button.hairline-left {
		color: #5CB61A !important;
		border-left: 0.1rpx solid #f6f6f6;
	}

	::v-deep .u-select__header__confirm.u-select__header__btn {
		color: #5CB61A !important;
	}

	::v-deep .u-form-item--left {
		font-size: 26rpx;
		font-weight: 300;
		color: #333333;
		line-height: 36px;
		width: 122rpx !important;
		flex: 0.3 !important;
	}

	::v-deep u-form-item--right {
		margin-right: 200rpx !important;
	}

	.retuen_info {
		height: 300rpx;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}

	.subit_post {
		font-size: 32rpx;
		background-color: #5CB61A;
		font-weight: 400;
		color: #FFFFFF;
		padding: 30rpx 0rpx;
	}

	.goods_infos {
		background: #FFC32C;
		border-radius: 20rpx;
		margin: 20rpx 20rpx;
		padding: 20rpx 20rpx;
	}

	.flex_bds {
		margin-right: 60rpx;
	}

	.content_s {
		background: #FFC32C;
		border-radius: 20rpx;
		margin:20rpx 20rpx;
		padding:  20rpx 20rpx;
		.mt30:nth-child(1){
			margin-top: 10rpx !important;
		}
		

	}
	
	.subit_post_s {
		// border-radius: 20rpx;
		margin: 20rpx 20rpx;
		// padding: :;px 20rpx;
	}

	.hearders {
		background: #FFC32C;
		border-radius: 20rpx;
		margin: 0rpx 20rpx;
		padding: 20rpx 20rpx;

		.time_s {
			margin-top: 41rpx;
			font-size: 24rpx;
			font-weight: 300;
			color: #FFFFFF;
		}
	}

	.c_2 {
		width: 436rpx;
	}

	.c_price {
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
	}

	.c_num {
		font-weight: 400;
		color: #C3C3C3;
		line-height: 36rpx;
	}

	.goods_name {
		margin-top: 20rpx;
		color: #333333;
		line-height: 40rpx;
		height: 60rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-line-clamp: 2;
		// -webkit-box-orient: vertical;
	}
</style>
